<template>
  <div class="set-up">
    <addUser
      ref="addUser"
      :treeData="sourceTreeData"
      :headTitle="headTitle"
      :key="Number(`2${keyIndex}`)"
      :keyIndex.sync="keyIndex"
      @reload="getcurrentUserList"
    />
    <mySetting
      ref="mySetting"
      :key="Number(`1${keyIndex}`)"
      :keyIndex.sync="keyIndex"
      @reloadSelect="getdetail"
    />
    <appendSetting
      ref="appendSetting"
      :key="Number(`3${keyIndex}`)"
      :keyIndex.sync="keyIndex"
      @reloadSelect="request"
    />
    <accountDialog
      :treeData="treeData"
      :headTitle="headTitle"
      :key="keyIndex"
      :keyIndex.sync="keyIndex"
      ref="accountDialog"
      @reload="request"
    />
    
    <div class="layout">
      <div class="layout-left">
        <div class="header">
          <label>组织架构</label>
          <el-button size="small" type="primary" @click="add"
            >创建组织</el-button
          >
        </div>
        <div class="main">
          <el-tree
            :data="listData"
            node-key="deptId"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :default-expanded-keys="defaultexpandedkeys"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="add-custom" v-if="data.parentId===100" @click.stop>
                <el-button type="text" size="mini" @click="append(data)">
                  关联账户
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="layout-right">
        <div class="layout-right-top">
          <div class="header">
            <label>{{ selectData.deptName }}</label>
            <el-button size="small" type="primary" @click="edit"
              >修改</el-button
            >
          </div>
          <div class="main">
            <div class="section">
              <div class="section-main-list main-list">
                <label>组织类型：</label>
                <span>{{ getInfoData.deptType | fildeptType }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>项目工期：</label>
                <span>{{ getInfoData.projectDuration }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>状态：</label>
                <span class="blue1" v-if="getInfoData.status==='0'">使用中</span>
                <span class="red1" v-else>已停用</span>
              </div>
              <div class="section-main-list main-list">
                <label>别名：</label>
                <span>{{ getInfoData.deptShortName }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>组织代码：</label>
                <span>{{ getInfoData.deptCode }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>合同额：</label>
                <span class="jine">￥{{ formatNumber(getInfoData.amount) }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>创建时间：</label>
                <span>{{ getInfoData.createTime }}</span>
              </div>
              <div class="section-main-list main-list">
                <label>备注：</label>
                <span>{{ getInfoData.remark }}</span>
              </div>
            </div>
            <div class="main-list">
              <label>可用资金账户：</label>
              <div class="banner">
                <div
                  class="banner-list"
                  v-for="item in getInfoData.ableFundAccount"
                >
                  {{ item.name }}
                </div>
                <i class="icon el-icon-s-tools" @click="setting('2')"></i>
              </div>
            </div>
            <div class="main-list" v-if="false">
              <label>可用往来账户：</label>
              <div class="banner">
                <div
                  class="banner-list"
                  v-for="item in getInfoData.ableCurrntAccount"
                >
                  {{ item.name }}
                </div>

                <i class="icon el-icon-s-tools" @click="setting('1')"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="layout-right-bottom">
          <div class="header">
            <label>本级组织成员</label>
            <el-button size="small" type="primary" @click="addUser"
              >添加成员</el-button
            >
          </div>
          <div class="main">
            <el-table :data="tableData" height="100%" style="width: 100%">
              <el-table-column
                prop="date"
                label="级别"
                :show-overflow-tooltip="true"
              >
                <template #default="scope">
                  本级
                </template>
              </el-table-column>
              <el-table-column
                prop="userName"
                label="姓名"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="phonenumber"
                label="手机号"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="deptName"
                label="所在组织"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="操作"
                width="180"
                :show-overflow-tooltip="true"
              >
                <template #default="scope">
                  <!-- <span style="color:#55A8FD;cursor:pointer;">编辑</span> -->
                  <span
                    style="color:#55A8FD;cursor:pointer;"
                    @click="remove(scope.row)"
                    >移除</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="footer">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import accountDialog from "./components/account_dialog";
import mySetting from "./components/setting";
import appendSetting from "./components/append-setting";
import addUser from "./components/add_user";
import request from "@/utils/request";
import toTree from "@/utils/toTree";
import Qs from "qs";
export default {
  components: {
    accountDialog,
    mySetting,
    appendSetting,
    addUser
  },
  data() {
    return {
      keyIndex: 1,
      headTitle: "",
      defaultProps: {
        children: "children",
        label: "deptName"
      },
      tableData: [],
      currentPage: 1,
      sourceTreeData: [],
      treeData: [],
      listData: [],
      selectData: {},
      getInfoData: {},
      defaultexpandedkeys:[],
    };
  },
  created() {
    this.request();
  },
  filters: {
    fildeptType(val) {
      const data = {
        "0": "集团",
        "1": "分公司",
        "2": "项目"
      };
      return data[val] || "--";
    }
  },
  methods: {
    formatNumber(num) {
      if (!num) {
        return 0;
      }
      let str = String(num).split('.');
      let num1 = str[0];
      let num2 = str[1] ? `.${str[1]}` : '';
      let reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num1 + '').replace(reg, '$&,') + num2;
    },
    remove(val) {
      request({
        url: "/system/org/delOrgUser",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: val.deptId,
          userId: val.userId
        })
      }).then(res => {
        this.$message({
          message: res.msg,
          type: "success"
        });
        this.getcurrentUserList();
        console.log(res);
      });
    },
    getcurrentUserList(val = this.selectData) {
      request({
        url: "/system/org/currentUserList",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: val.deptId
        })
      }).then(res => {
        this.tableData = res.data;
        console.log(res);
      });
    },
    request() {
      request({
        url: "/system/org/list",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" }
      }).then(res => {
        console.log(toTree(res.data, "deptId", "parentId"));
        this.sourceTreeData = res.data;
        this.treeData = res.data.filter(
          item => item.parentId === 100 || item.deptId === 100
        );
        // this.listData = toTree(res.data, "deptId", "parentId");
        const data = res.data.filter(item => item.status === "0");
        const scrap = res.data.filter(item => item.status === "1");
        const listData = toTree(data, "deptId", "parentId");
        const scrapList = {
          deptId: res.data[res.data.length - 1].deptId + 999,
          deptName: "停用组织",
          parentId: 101,
          children: []
        };
        scrap.forEach(item => scrapList.children.push(item));
        listData[0].children.push(scrapList);
        this.defaultexpandedkeys=listData.map(item=>item.deptId)
        this.listData = listData;
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    add() {
      this.headTitle = "创建组织";
      this.$refs.accountDialog.open({
        type: "add"
      });
    },
    append(val){
      this.$refs.appendSetting.open({
        val,
      });
    },
    edit() {
      this.headTitle = "修改组织";
      this.$refs.accountDialog.open({
        type: "edit",
        selectData: this.selectData
      });
    },
    getdetail(val = this.selectData) {
      request({
        url: "/system/org/detail",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: val.deptId
        })
      }).then(res => {
        this.getInfoData = res.data;
      });
    },
    handleNodeClick(data) {
      if (data.parentId === 0 || data.parentId === 113) {
        return;
      }
      // if (data.parentId === 0 || data.parentId === 100) {
      //   return;
      // }
      console.log(data);
      this.getdetail(data);
      this.getcurrentUserList(data);
      this.selectData = data;
    },
    setting(category) {
      this.$refs.mySetting.open({
        category,
        getInfoData: this.getInfoData
      });
    },
    addUser() {
      this.headTitle = "添加成员";
      this.$refs.addUser.open({ ...this.selectData });
    }
  }
};
</script>

<style scoped lang="scss">
.set-up {
  width: 100%;
  height: calc(100vh - 85px);
  background: rgba(245, 246, 248, 1);
  padding: 10px;

  .blue1 {
    color: #1890ff!important;
  }

  .red1 {
    color: #f1ab98!important;
  }

  .black {
    color: #c4c4c4;
  }
  .jine{
    font-size: 15px!important;
    font-weight: bold!important;
    color:#000!important;
  }

  .layout {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;

    .header {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    &-left {
      width: 400px;
      height: 100%;

      .main {
        width: 100%;
        height: calc(100% - 50px);
        border: 1px solid rgba(212, 215, 225, 1);
        overflow: auto;

        .custom-tree-node{
          width:100%;
          display:flex;
          flex-direction:row;
          align-items:center;
          justify-content:space-between;

          .add-custom{
            // display:none;
            height:100%;
            padding-right:10px;
          }

          &:hover .add-custom{
            display:block;
          }
        }
      }
    }

    &-right {
      width: calc(100% - 420px);
      height: 100%;

      .main {
        width: 100%;
        height: calc(100% - 50px);
      }

      &-top {
        width: 100%;
        height: 300px;

        .main {
          padding: 10px;
          border: 1px solid rgba(212, 215, 225, 1);
          overflow: auto;

          .section {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;

            &-main-list {
              width: 30%;
              min-width: 300px;
            }
          }

          &-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px;

            label {
              width: 120px;
              font-size: 16px;
              font-family: Microsoft YaHei UI;
              font-weight: bold;
              color: rgba(68, 82, 121, 1);
              text-align: left;
              display: inline-block;
            }

            span {
              font-size: 14px;
              font-family: Microsoft YaHei UI;
              font-weight: 400;
              color: rgba(68, 82, 121, 0.64);
            }

            .banner {
              width: calc(100% - 100px);
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: wrap;

              &-list {
                border: 1px solid rgba(64, 158, 255, 1);
                background: rgba(64, 158, 255, 0.3);
                color: rgba(64, 158, 255, 1);
                padding: 4px 2px;
                margin: 4px;
              }

              .icon {
                margin: 0 10px;
                color: rgba(64, 158, 255, 1);
                cursor: pointer;
              }
            }
          }
        }
      }

      &-bottom {
        width: 100%;
        height: calc(100% - 300px);
        overflow: auto;
        padding: 0 10px;

        .header {
          width: 100%;
          height: 40px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
        }
        .main {
          width: 100%;
          // height: calc(100% - 100px);
          height: calc(100% - 60px);
          padding: 10px;
        }

        .footer {
          width: 100%;
          height: 30px;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
